<template>
  <div class="favorite-list">
    <el-table
      v-loading="loading"
      :data="favorites"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="problem_title"
        label="题目"
        min-width="200"
      >
        <template #default="{ row }">
          <router-link 
            :to="`/problem/${row.problem_id}`"
            class="problem-link"
          >
            {{ row.problem_title }}
          </router-link>
        </template>
      </el-table-column>

      <el-table-column
        prop="notes"
        label="笔记"
        min-width="300"
      >
        <template #default="{ row }">
          <el-input
            v-model="row.notes"
            type="textarea"
            :rows="2"
            :disabled="updatingIds.has(row.problem_id)"
            placeholder="添加笔记..."
            @blur="handleUpdateNotes(row)"
          />
        </template>
      </el-table-column>

      <el-table-column
        prop="created_at"
        label="收藏时间"
        width="180"
        align="center"
      />

      <el-table-column
        label="操作"
        width="120"
        align="center"
      >
        <template #default="{ row }">
          <el-button
            type="danger"
            link
            :loading="removingIds.has(row.problem_id)"
            @click="handleRemoveFavorite(row.problem_id)"
          >
            取消收藏
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { listFavorites, removeFavorite, updateNotes } from '@/api/favorite'
import type { FavoriteItem } from '@/api/favorite'

const loading = ref(false)
const favorites = ref<FavoriteItem[]>([])
const removingIds = ref<Set<number>>(new Set())
const updatingIds = ref<Set<number>>(new Set())

const fetchFavorites = async () => {
  loading.value = true
  try {
     const response = await listFavorites()
     favorites.value = response.data
     console.log(favorites.value)
  } catch (error) {
    ElMessage.error('获取收藏列表失败')
  } finally {
    loading.value = false
  }
}

const handleRemoveFavorite = async (problemId: number) => {
  if (removingIds.value.has(problemId)) return
  
  removingIds.value.add(problemId)
  try {
    await removeFavorite(problemId)
    ElMessage.success('取消收藏成功')
    await fetchFavorites()
  } catch (error) {
    ElMessage.error('取消收藏失败')
  } finally {
    removingIds.value.delete(problemId)
  }
}

const handleUpdateNotes = async (favorite: FavoriteItem) => {
  if (updatingIds.value.has(favorite.problem_id)) return
  
  updatingIds.value.add(favorite.problem_id)
  try {
    await updateNotes(favorite.problem_id, favorite.notes)
    ElMessage.success('更新笔记成功')
  } catch (error) {
    ElMessage.error('更新笔记失败')
  } finally {
    updatingIds.value.delete(favorite.problem_id)
  }
}

onMounted(() => {
  fetchFavorites()
})
</script>

<style scoped>
.favorite-list {
  padding: 20px;
}

.problem-link {
  color: var(--el-color-primary);
  text-decoration: none;
}

.problem-link:hover {
  text-decoration: underline;
}
</style>
